<template>
  <div>
    <a-card>
      <div class="flex gap-2">
        <div class="flex-1">
          <a-table :data="statisticsList" :columns="tagColumns">
            <template #count="{ record }">
              {{ record.count }}
            </template>
          </a-table>
        </div>
      </div>
    </a-card>
    <a-card :title="t['选择模板']" class="mt-4">
      <ul class="list flex flex-col gap-4">
        <li class="flex gap-4">
          <div class="flex-1">{{ t["尺寸"] }}</div>
          <div class="flex-1">{{ t["选择模板"] }}</div>
        </li>
        <li v-for="(item, key) in templateList" v-show="item.options" :key="key" class="flex gap-4">
          <div class="text-nowrap flex-1">
            {{ item.desc }}
          </div>
          <div class="flex-1">
            <a-select v-model="item.templateId" :options="item.options"></a-select>
          </div>
        </li>
      </ul>
    </a-card>
    <div class="flex justify-between mt-3">
      <a-button status="danger" @click="back">{{ t["上一步"] }}</a-button>
      <a-button type="primary" @click="finished">{{ t["完成"] }}</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { addJobs, updateJobs } from "@/api/service/scheduled/scheduled";

import { Message, TableColumnData } from "@arco-design/web-vue";
import { useEventBus } from "@vueuse/core";

import { userStore } from "@/store/modules/user/user";
import { form, productKeys, resetForm } from "..";
import { setStep } from "../step";
import { statisticsList, templateList } from "./data";

const t = translate("公共模块");
const bus = useEventBus("refresh");
const tagColumns: TableColumnData[] = [
  {
    title: t.value?.["价签尺寸"],
    dataIndex: "desc"
  },
  {
    title: t.value?.["数量"],
    dataIndex: "count",
    slotName: "count"
  }
];

const back = () => {
  setStep(2);
};

onMounted(() => {
  if (form.value.template) {
    const formTemplate: [] = form.value.template;
    templateList.value.forEach((e) => {
      formTemplate.forEach((m: any) => {
        if (e.resolutionId === m.resolutionId) {
          e.templateId = m.templateId;
        }
      });
    });
  }
});
/* 提交 */
const finished = async () => {
  const templateIdList = templateList.value.map((e) => {
    return {
      resolutionId: e.resolutionId,
      templateId: e.templateId
    };
  });

  const userInfo = userStore();
  if (form.value.name.length === 0) {
    Message.warning(t.value?.["任务名不能为空"]);
    return;
  }
  form.value.fields = form.value.fields.map((e) => {
    if (e.type === 0) {
      e.value /= 100;
    }
    return e;
  });
  const details: any = {
    goods: productKeys.value,
    fields: form.value.fields,
    work: [] as string[],
    template: templateIdList
  };
  let rangeTime: any[] = [];
  if (form.value.type === "0" || form.value.type === "2") {
    details.work =
      form.value.rangDate.map((item) => {
        return item.split(" ")[0];
      }) || [];
  } else if (form.value.type === "3") {
    details.work = form.value.work;
  }

  if (form.value.type === "1" || form.value.type === "3") {
    rangeTime = form.value.rangeTime;
  } else {
    rangeTime =
      form.value.rangDate.map((item) => {
        return item.split(" ")[1];
      }) || [];
  }
  if (!rangeTime[0] || !rangeTime[1]) {
    Message.warning(t.value?.["开始时间或者结束时间不能为空"]);
    return;
  }
  const post = {
    name: form.value.name,
    type: form.value.type,
    start: rangeTime[0],
    stop: rangeTime[1],
    details: JSON.stringify(details),
    status: form.value.status,
    deptId: userInfo.user.deptId,
    id: form.value.id,
    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
  };

  if (form.value.id.length > 0) {
    await updateJobs(post);
  } else {
    await addJobs(post);
  }

  resetForm();
  form.value.visible = false;
  setStep(1);
  bus.emit("refresh");
};
</script>

<style lang="scss" scoped></style>
